<template>
	<div id="userLayout">
		<div class="login_panle">
			<div class="login_panle_form">
				<div class="login_panle_form_title">
					<img v-if="$GIN_VUE_ADMIN.appLogo" class="login_panle_form_title_logo" :src="$GIN_VUE_ADMIN.appLogo" alt>
					<p class="login_panle_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p>
				</div>
				<el-form ref="loginForm" :model="loginFormData" :rules="rules" @keyup.enter="submitForm">
					<el-form-item prop="username">
						<el-input v-model="loginFormData.username" clearable placeholder="请输入用户名">
							<template #suffix>
								<span class="input-icon">
									<el-icon>
										<user />
									</el-icon>
								</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="loginFormData.password" clearable type="password" placeholder="请输入密码">
							<template #suffix>
								<span class="input-icon">
									<el-icon>
										<component is="lock" @click="changeLock" />
									</el-icon>
								</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="captchaValue">
						<div class="vPicBox">
							<el-input v-model="loginFormData.captchaValue" clearable placeholder="请输入验证码" style="width: 60%" />
							<div class="vPic">
								<img v-if="picPath" :src="picPath" alt="请输入验证码" @click="getCaptchaUrl()">
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="large" style="width: 46%; margin-left: 0" @click="submitForm">登
							录</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="login_panle_right" />
			<div class="login_panle_foot">
				<!-- <div class="copyright">
          <bootomInfo />
        </div> -->
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Login',
}
</script>

<script setup>
import {reactive,ref} from 'vue'
import { login,getAccountDetail,getRoleDetail } from '@/api/user'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/pinia/modules/user'
import {setCookie,getCookie,removeCookie} from '@/utils/cookie'
import { message } from '@/utils/element'
import {encodeRSA} from '@/utils/encryp'
const router = useRouter()

const userStore = useUserStore()

// 验证函数
const checkUsername = (rule, value, callback) => {
	if (value.length < 2) {
		return callback(new Error('请输入正确的用户名'))
	} else {
		callback()
	}
}
const checkPassword = (rule, value, callback) => {
	if (value.length < 3) {
		return callback(new Error('请输入正确的密码'))
	} else {
		callback()
	}
}

const loginForm = ref(null)

const loginFormData = reactive({
	captchaKey:'',
	captchaValue: '',
	username: import.meta.env.VITE_USER_NAME,
	password: import.meta.env.VITE_PASSWORD
})

// 获取显示验证码图片地址
const picPath = ref('')
const getCaptchaUrl = () => {
	loginFormData.captchaKey = Date.parse(new Date()) // 当前时间戳
	picPath.value = `${import.meta.env.VITE_BASE_API}/login/boss/captcha/${loginFormData.captchaKey}`
}

getCaptchaUrl()


const rules = reactive({
	username: [{
		validator: checkUsername,
		trigger: 'blur'
	}],
	password: [{
		validator: checkPassword,
		trigger: 'blur'
	}],
	captchaValue: [{
		required: true,
		message: '请输入验证码',
		trigger: 'blur'
	},
	{
		message: '验证码格式不正确',
		trigger: 'blur',
	},
	],
})


const goLogin = async () => {
	//return await userStore.LoginIn(loginFormData)
	let param = JSON.parse(JSON.stringify(loginFormData))
	param.password = await encodeRSA(param.password) // 密码加密传输
	param.username = await encodeRSA(param.username) // 用户名加密传输
	const res = await login(param)
	if(res.code == 200){
		userStore.setToken(res.data.token)
		const permissionUserList = []
		res.data.permissionUserList.forEach(item => {
			permissionUserList.push(item.permissionId)
		});
		userStore.setUserInfo({
			nickName:loginFormData.username,
			loginTime:new Date(),
			realName:res.data.realName,
			company:res.data.company,
			permissionUserList:res.data.permissionUserList,// 权限数组
		})
		userStore.setDefaultRouterObject({
			defaultRouter:'Index',
			defaultRouterName:'首页'
		})
		//addRouter()
		router.push({name:userStore.defaultRouterObject.defaultRouter})
	}else{
		message(res.message,3)
		loginFormData.captchaValue = ''
		getCaptchaUrl()
	}
}

const submitForm = () => {
	loginForm.value.validate(async (v) => {
		if (v) {
			goLogin()
		} else {
			message('请正确填写登录信息',3)
			loginFormData.captchaValue = ''
			getCaptchaUrl()
			return false
		}
	})
}

// 动态添加路由
const addRouter = ()=>{
	router.addRoute(
		{
			path: '/11',
			name: '11',
			hidden:true,
			component: () => import('@/view/error/index.vue'),
			meta: { title: '11' }
		}
	)
}

</script>

<style lang="scss" scoped>
@import "@/style/newLogin.scss";
</style>
